<template>
  <div>
    <NuxtLayout name="backgroud">
      <div class="sponsor">
        <h2 class="sponsor-title kaiti">您的赞赏是我创作的动力</h2>
        <div class="sponsor-qrcode">
          <img src="../../assets/images/wx.jpg" alt="微信">
          <img src="../../assets/images/zfb.jpg" alt="支付宝">
        </div>
        <p class="sponsor-doc">网站建设与维护实属不易，如果我的文章帮助到了您，或者您想支持我的网站，可以扫描上方二维码进行赞助，非常感谢各位大哥的支持~</p>
        <div class="sponsor-table">
          <h2 class="kaiti">赞助名单（谨此感谢）</h2>
          <el-table
            :data="tableData"
            border
            stripe
            v-loading="loading"
            style="background-color: transparent;"
            cell-class-name="cellClass"
            header-row-class-name="headerClass"
            :height="300">
            <el-table-column
              v-for="(item,index) in tableColumn"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              align="center"
              :min-width="item.minWidth" />
          </el-table>
        </div>
        <div class="sponsor-pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="changePage" />
        </div>
      </div>
    </NuxtLayout>
  </div>
</template>
<script setup lang="ts">
import { getSponsor } from "../../service/api/sponsor"
const tableData = ref()
let total = ref(0)
const loading = ref(false)
const pages = reactive({
  pageNo:1,
  pageSize:10
})
const tableColumn = ref([
  {
    prop:'name',
    label:'赞助人',
    minWidth:'100px'
  },
  {
    prop:'methods',
    label:'赞助方式',
    minWidth:'100px'
  },
  {
    prop:'amount',
    label:'赞助金额（元）',
    minWidth:'100px'
  },
  {
    prop:'time',
    label:'赞助时间',
    minWidth:'100px'
  },
])
const getSponsorList = async() => {
  await nextTick()
  loading.value = true
  const res:any = await getSponsor(pages)
  const data = res.data._value
  if(data.code == 200){
    tableData.value = data.data
    total.value = data.total
    pages.pageNo = data.pageNo
    pages.pageSize = data.pageSize
    loading.value = false
  }
}
const changePage = (page:any) => {
    pages.pageNo = page
    getSponsorList()
}
onMounted(() => {
  getSponsorList()
})

</script>
<script lang="ts">
  export default {
    layout:false
  }
</script>
<style lang="scss">
.sponsor{
  width: 72%;
  min-height:calc(100vh - 240px);
  background-color: rgba($color: #fff, $alpha: .6);
  margin: 20px auto;
  border-radius: 6px;
  padding: 20px 4%;
  &-title{
    font-size: 20px;
    color: $yun-color;
    text-align: center;
  }
  &-qrcode{
    text-align: center;
    margin-top: 20px;
    img{
      width: 200px;
      height: 250px;
      margin-right: 20px;
      border-radius: 6px;
    }
  }
  &-doc{
    text-align: center;
    margin-top: 20px;
    font-size: 16px;
  }
  &-table{
    margin-top: 20px;
    margin-bottom: 20px;
    h2{
      font-size: 22px;
      text-align: center;
      color: $yun-color;
      margin-bottom: 20px;
    }
  }
  &-pagination{
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
.cellClass{
  background: transparent !important;
  .cell{
    background: transparent !important;
    color: $yun-font_golden_4;
  }
}
.el-table__row{
  background: transparent !important;
}
.headerClass{
  background: transparent !important;
  .el-table__cell{
    background: transparent !important;
    .cell{
      background: transparent !important;
      color: $yun-color !important;
    }
  }
}
</style>